<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-col :span="8" v-for="(o, index) in foods" :key="o">
            <el-card :body-style="{ padding: '0px' }" style="width: 220px; margin-top: 20px; margin-left: 20px;">
              <el-row>
                <el-col :span="10">
                  <el-image style="width: 200px; height: 200px; padding-left: 10px; padding-top: 15px;"
                    :src="o.coverPhoto"
                    :fit="fit"></el-image>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20" :offset="1">
                  <span style="font-size:15px;">{{o.foodName}} </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10" :offset="1" style="margin-top: 10px;">
                  <span style="font-size:15px; color: #f08300;">￥{{o.price}}</span>
                </el-col>
                <el-col :span="10" :offset="3">
                  <el-button type="text" class="button" @click="addCart(o.id,1)">加入购物车</el-button>
                </el-col>
              </el-row>

            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="5" style="margin-top: 20px;width: 285px; ">
        <el-row>
          <el-col :span="15" style="background-color: rgb(51, 51, 51); height: 50px;">
            <i style="line-height: 50px; color: #fff; font-size:28px; margin-left: 10px;"
              class="iconfont icon-gouwuche"></i>
          </el-col>
          <el-col :span="9" style="background-color: rgb(255, 170, 0); height: 50px;">
            <span style="line-height: 50px; cursor: pointer; margin-left: 20px; font-weight: bold;"
              @click="submitCart(storeCart)">立即下单</span>
          </el-col>
        </el-row>
        <el-row>
          <div v-if="storeCart==null" class="empty_cart">
            <span>购物车还是空的哦~</span>
          </div>
          <div v-if="storeCart!=null" style="background-color:  rgb(255, 255, 255);">
            <el-row class="item_row">
              <el-col :span="24" style="line-height: 55px;font-size: 15px; background-color: rgb(250, 250, 250);">
                <span>购物车</span>
                <span style="margin-left:127px; cursor: pointer;" @click="cleanCart"><i class="el-icon-delete"
                    style="font-size: 19px; margin-right: 8px;"></i>清空菜品</span>
              </el-col>
            </el-row>
            <el-row class="item_row" v-for="item in storeCart.list">
              <div class="food_item">
                <el-col :span="11">
                  <span>{{item.foodName}}</span>
                </el-col>
                <el-col :span="9">
                  <el-input-number style="width: 90px;" size="mini" @change="changeCount(item.foodId,item.count)" v-model="item.count" :min="0" :max="10"></el-input-number>
                </el-col>
                <el-col :span="4">
                  <span style="color: rgb(255, 170, 0);">&yen;{{item.price}}</span>
                </el-col>
              </div>
            </el-row>
           <!-- <el-row class="item_row">
              <el-col :span="21">
                <span>包装盒</span>
              </el-col>
              <el-col :span="3">
                <span>&yen;1</span>
              </el-col>
            </el-row>
            <el-row class="item_row">
              <el-col :span="21">
                <span>配送费(不计入起送价)</span>
              </el-col>
              <el-col :span="3">
                <span>&yen;0</span>
              </el-col>
            </el-row> -->
            <el-row class="item_row">
              <el-col span="20" offset="2">
                 <el-radio v-model="dispatching" label="1" >到店自取</el-radio>
                  <el-radio v-model="dispatching" label="2">商家配送</el-radio>
              </el-col>
            </el-row>
            <el-row class="item_row">
              <el-col :span="24" :offset="15">
                <span>共计</span>
                <span style="font-size: 26px; color: red; font-weight: bold;">&yen;{{storeCart.price}}</span>
              </el-col>
            </el-row>
            <el-row class="item_row">
              <el-col :span="24" style="font-size: 11px;text-align: center;">
                <span>膳食服务点餐系统，实惠又便宜~</span>
              </el-col>
            </el-row>
          </div>

        </el-row>
        <div style="background-color: #f08300;">

        </div>
      </el-col>


    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'U_foods',
    data() {
      return {
        num: 2,
        score: "5",
        url: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
        storeCart: {},
        foodIds : '',
        dispatching:'1',
        storeId: 0,
        foods: [],
        allfoodIds:[],
        form:{},
      }
    },
    methods: {
      getFoods() {
        this.$http.post("/foodVariety/search", {
          storeId: this.storeId
        }).then(resp => {
          if (resp.data.code == 200) {
            this.foods = resp.data.data.list;
          }
        })
      },
      showCartByStore(storeId) {
        this.$http.get("/userCart/showCartByStoreId", {
          params: {
            storeId: storeId,
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.storeCart = resp.data.data;
            console.log(this.storeCart)
          }
        })
      },
     submitCart(obj) {
       if(localStorage.getItem('loginUser')==null){
          this.$router.push('/login');
       }
       if(obj==null){
         this.$message.warning("请先添加购物车哦！");
         return;
       }
       for (const i of obj.list) {
         this.allfoodIds.push(i.foodId);
       }
       this.form.storeId = obj.storeId;
       this.form.storeName = obj.storeName;
       this.form.dispatching = this.dispatching;
       this.form.foodIds = this.allfoodIds;
       console.log(this.form);
       this.$http.post("/userCart/submitCart", this.form).then(resp => {
         if (resp.data.code != 200) {
           this.$message({
             message: resp.data.message,
             type: 'warning'
           });
         }
         this.foodIds = [];
         if (resp.data.code == 200) {
           localStorage.setItem("cartInfo",JSON.stringify(resp.data.data));
            this.$router.push("/submitCart");
         }
       })

     },

      cleanCart() {
        var ids = '';
        for(const i of this.storeCart.list){
          ids = ids +i.foodId+",";
        }
        this.foodIds = ids;
        // console.log(this.foodIds);
        this.$http.post("/userCart/deleteCart",{
          foodIds:this.foodIds
        }).then(resp=>{
          if(resp.data.code==200){
            this.showCartByStore(this.storeId)
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      changeCount(foodId,count){
        console.log(foodId,count);
        this.$http.post("/userCart/updateCart",{
          foodId:foodId,
          count:count,
        }).then(resp=>{
          if(resp.data.code==200){
            this.showCartByStore(this.storeId);
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },

      addCart(foodId, count) {
        if(localStorage.getItem('loginUser')==null){
           this.$router.push('/login');
        }
        else{
          console.log(foodId, count);
          this.$http.post("/userCart/addCart", {
            foodId: foodId,
            count: count,
          }).then(resp => {
            if (resp.data.code == 200) {
              console.log(resp)
              this.showCartByStore(this.storeId);
            }else{
            this.$message.error(resp.data.message);
          }
          })
        }
      
      },
      initParams(storeId) {
        this.storeId = storeId;
      }
    },
    created() {
    },
    mounted() {
      this.initParams(this.$route.query.id);
      this.showCartByStore(this.$route.query.id);
      this.getFoods();
    }
  }
  import '../assets/icon/iconfont.css';
</script>

<style scoped>
  .empty_cart {
    height: 300px;
    width: 280px;
    background: url("../assets/shopping-cart.png") no-repeat bottom/40% rgb(247, 244, 241);
    line-height: 200px;
    text-align: center;
    font-size: 18px;

  }

  .food_item {
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }

  .item_row {
    border-bottom: 1px solid gainsboro;
    height: 55px;
    background-color: rgb(245, 247, 250);
    padding-left: 8px;
    font-size: 14px;
    line-height: 55px;
  }
</style>
